【pickadate.js】シンプルだけど高機能な日付カレンダー編

清田隆志

2013.07.31

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

pickadate.jsというライブラリーの中で、高機能な日付カレンダーを紹介してもらったので試してみました。

アジェンダ

ソースのダウンロード
実装してみる。
日本語表記にする
いろいろなオプション
まとめ

ソースのダウンロード

まずはこちらのサイトからソースをダウンロードしてきます。ファイルを展開するといろいろファイルはありますが実際に使うファイルは[lib]フォルダ内にあります。

img-002-1

[lib]フォルダ内は以下のファイルになります、今回は日付カレンダー用のjs、cssを使用してみます。

実装してみる

それでは実際に表示してみようと思います。今回のデモで使用したファイルになります。

css

default.css
default.date.css

javascript

jquery
picker.date.js
legacy.js
app.js←こちらが実際に実行するファイルです。

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Pickadate demo 001</title>

<link rel="stylesheet" href="./css/default.css">
<link rel="stylesheet" href="./css/default.date.css">


<script src="http://code.jquery.com/jquery-1.10.0.min.js"></script>

<script src="./js/picker.js"></script>
<script src="./js/picker.date.js"></script>
<script src="./js/legacy.js"></script>
<script src="./js/app.js"></script>

</head>
<body>

<fieldset class="fieldset">
  <input id="demo001"  type="text" placeholder="クリックしてください">
</fieldset>


</body>
</html>

app.js

$(function() {
    $('#demo001').pickadate();
});

実際に表示してみる

インプット要素をクリックすると日付カレンダーが表示されます。なかなかシンプルでいいですね。

デモページ

日本語表記

日本語対応は、まだ残念ながら対応されていないようなので自作してみました。 lang-ja.jsファイルを作成し、app.jsの前に読み込んでおきます。

javascript

jquery
picker.date.js
legacy.js
lang-ja.js←こちら読み込みます。
app.js

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Pickadate demo 002</title>

<link rel="stylesheet" href="./css/default.css">
<link rel="stylesheet" href="./css/default.date.css">


<script src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
<script src="./js/picker.js"></script>
<script src="./js/picker.date.js"></script>
<script src="./js/legacy.js"></script>
<script src="./js/lang-ja.js"></script>
<script src="./js/app.js"></script>

</head>
<body>

<fieldset class="fieldset">
  <input id="demo002"  type="text" placeholder="クリックしてください">
</fieldset>


</body>
</html>

lang-ja.js

jQuery.extend( jQuery.fn.pickadate.defaults, {
    monthsFull: [ '1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月' ],
    monthsShort: [ '1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月' ],
    weekdaysFull: [ '日曜' , '月曜', '火曜', '水曜', '木曜', '金曜', '土曜'],
    weekdaysShort: [ '日曜' ,  '月曜', '火曜', '水曜', '木曜', '金曜', '土曜'],
    today: '本日',
    clear: 'キャンセル',
    format: 'yyyy年mm月dd日'
});

指定オプションの説明

オプション	説明
monthsFull	月の表記を指定
monthsShort	省略された月の表記。例:April→Apr 日本語表記は省略された月表記はなし。
weekdaysFull	曜日の表記を指定
weekdaysShort	省略された曜日の表記を指定。例:Sunday→Sun 日本語表記は省略された曜日表記はなし。
today	下部の当日指定ボタンの表記。
format	インプット要素のvalueに入る日付フォーマットの表記。

日本語表記で表示ができました。

デモページ

いろいろなオプション

週始まりの指定

カレンダーの月曜始まりか日曜始まりかの指定が可能です。

$(function() {
    $('セレクタ').pickadate({
        firstDay: 1
    });
});

0指定の場合:日曜週始まりカレンダー指定
1指定の場合:月曜週始まりカレンダー指定

デモページ

入力日付フォーマット指定

カレンダーからの入力フォーマットの指定が可能です。

$(function() {
    $('セレクタ').pickadate({
      format: 'yyyy年m月d日(ddd)'
    });
});

例として上記の指定をすると:xxxx年x月d日(曜日)といった表記で入力が可能です。

デモページ

オプション	説明	表示サンプル
d	日の表示(数値)	1 – 31
dd	日の表示(数値)	01 – 31
ddd	省略された曜日の表示	Sun – Sat(デフォルト指定) 日曜 - 土曜(上記の日本語化の場合)
dddd	曜日の表示	Sunday – Saturday(デフォルト指定) 日曜 - 土曜(上記の日本語化の場合)
m	月の表示(数値)	1 – 12
mm	月の表示(数値)	01 – 12
mmm	省略された月名の表示	Jan – Dec 1月 - 12月(上記の日本語化の場合)
mmmm	月名の表示	January – December 1月 - 12月(上記の日本語化の場合)
yy	2桁までの西暦を表示(数値)	00 – 99
yyyy	西暦を表示(数値)	2000 – 2999

年月のドロップダウン指定

年月の指定をドロップダウンから指定が可能です。

$(function() {
    $('セレクタ').pickadate({
      selectYears: true,
      selectMonths: true
    });
});

デモページ

上記以外にも、設定できる項目がこちらで紹介されています。
いろいろ試してみていただければと思います。

まとめ

シンプルな作りですが、いろいろな用途を想定した作りになっておりかなりパワフルなコンポーネントではないでしょうか。
独自に作成したテーマ等も反映できるようだったので、オリジナルテーマのカレンダーコンポーネントも作成が可能なようです。
急ぎ足でpickadate.jsのカレンダーコンポーネントをご紹介しました。